﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="~/Areas/Back/lib/layui/css/layui.css">
    <script src="~/Areas/Back/lib/layui/layui.js" charset="utf-8"></script>
    <style>
        .layui-table-cell {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <form class="layui-form" onsubmit="return false" style="margin-top: 50px;">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" id="title" class="layui-input" />
            </div>
            <button id="search" data-type="reload" class="layui-btn">搜索</button>
        </div>
    </form>
    <table id="my_table" lay-filter="mjf"></table>

    <script type="text/html" id="top_tool">
        <button class="layui-btn" lay-event="create">新建轮播图</button>

    </script>
    <script type="text/html" id="inline_tool">
        <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
    </script>
</body>
<script>
		layui.use(['table'], function() {
			var table = layui.table;
			var $ = layui.$;
			var layer = layui.layer;
			table.render({
				elem: "#my_table",
				url: "GetBannerList", 
				method: "post",
				toolbar: "#top_tool",
				page: true, 
				where: {

				},
				cols: [[{
				    type: 'checkbox'
				}, {
				    field: 'Title',
				    title: '标题',
				},
                 {
                     field: 'ToUrl',
                     title: '跳转地址',
                 }, {
				    field: 'ImgUrl',
				    title: '图片',
				    templet:'<div><img src="/{{d.ImgUrl}}" /></div>;'
				},
                {
				    fixed: 'right',
				    title: '操作',
				    toolbar: '#inline_tool'
				}]]
			});

			var active = {
				reload: function() {
					table.reload('my_table', {
						where: {

						    title: $("#title").val()

						}
					})
				}
			};
			$("#search").click(function() {
				var type = $(this).data('type'); 
				active[type] ? active[type].call(this) : '';
			});
			table.on('toolbar(mjf)', function(obj) {

				if(obj.event == "create") {
				
					layer.open({
						type: 2,
						area: ['800px', '750px'],
						content: 'Add' 
					});
				}
			});
			table.on('tool(mjf)',function(obj){
				console.log(obj);
				var data=obj.data;
				if(obj.event=="edit"){
				    layer.open({
				        type: 2,
				        area: ['800px', '750px'],
				        content: 'Edit?Id='+data.Id 
				    });
				}else if(obj.event=="del"){
					layer.confirm("真的删除吗？",function(index){
					    $.ajax({
					        url: "DelArt",
					        type: "post",
					        dataType: "json",
					        data: {
                                Id:data.Id
					        },
					        success: function (res) {
					            if (res.success == true) {
					                layer.close(index);

					                location.reload();
					            } else {
                                    layer.msg(res.msg)
					            }
					        },
					        error: function (e) {
					            console.log(e);
					        }
					    })

					});
				}
			});

		});
</script>
</html>